<!DOCTYPE html>
<html>

<head>
    <#include "/yq/admin/components/meta.html" />
    <title>蓁奕科技 ${metaTitleSuffix!}</title>
    <#include "/yq/admin/components/stylesheets.html" />
    <style>
        .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .el-tag+.el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
    </style>
</head>

<body>
    <div id='app'>
        <el-container>
            <#assign menuIndex="1-1" />
            <#include "/yq/admin/components/menu.html" />
            <el-container>
                <#include "/yq/admin/components/header.html" />
                <el-main>
                    <template>
                        <el-form ref="form" :model="form" label-width="110px">
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="标题">
                                        <el-input v-model="form.title"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="副标题">
                                        <el-input v-model="form.subtitle" type='text'></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="喜欢">
                                        <el-input v-model="form.subscribeCount" type='number'></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="简介">
                                        <el-input v-model="form.intro" type=textarea rows='5'></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="地址">
                                        <el-input v-model="form.address" type=textarea rows='5'></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="活动时间">
                                        <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" unlink-panels="true" :default-value="new Date">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="类型">
                                        <el-select v-model="form.type" placeholder="请选择">
                                            <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="商品">
                                        <el-select v-model="form.productId" placeholder="请选择" filterable clearable>
                                            <el-option v-for="item in products" :key="item.id" :label="item.title" :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="热门">
                                        <el-checkbox v-model="form.isHot" false-label='0' true-label='1' :checked='form.isHot == 1' border>热门</el-checkbox>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="置顶">
                                        <el-checkbox v-model="form.isTop" false-label='0' true-label='1' :checked='form.isTop == 1' border>置顶</el-checkbox>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="隐藏">
                                        <el-checkbox v-model="form.isHidden" false-label='0' true-label='1' :checked='form.isHidden == 1' border>隐藏</el-checkbox>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="启用">
                                        <el-checkbox v-model="form.isEnable" false-label='0' true-label='1' :checked='form.isEnable == 1' border disabled>启用</el-checkbox>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="封面">
                                        <el-upload class="avatar-uploader" :on-success="handleAvatarSuccess" :http-request='uploadQnFile' list-type='picture' :show-file-list="false">
                                            <img v-if="form.cover" :src="form.cover" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="分享标题">
                                        <el-input v-model="form.shareTitle"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="分享图片">
                                        <el-upload class="avatar-uploader" :on-success="handleShareImgSuccess" :on-error="handleShareImgError" :http-request='uploadQnFile' list-type='picture' :show-file-list="false">
                                            <img v-if="form.shareImage" :src="form.shareImage" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                        <el-button type="text" @click="useCoverForShare" :disabled="!form.cover">使用封面图片</el-button>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="链接">
                                        <el-input v-model="form.url"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="标签">
                                        <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
                                            {{tag}}
                                        </el-tag>
                                        <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
                                        </el-input>
                                        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增标签</el-button>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="小程序链接">
                                        <label v-if="form.id">pages/productInfo/productInfo?itemId={{ form.id }}</label>
                                        <label v-else style="color: #888;">请在保存之后查看</label>
                                    </el-form-item>
                                </el-col>
                                <!-- <el-col :span="12">
                                    <el-form-item label="商品描述">
                                        <el-upload :http-request='onUploadSMImage' list-type="picture-card" :file-list="fileList2" :on-success="fileChanged" :on-remove='fileChanged'>
                                            <i class="el-icon-plus"></i>
                                        </el-upload>
                                    </el-form-item>
                                </el-col> -->
                                <el-col>
                                    <el-form-item>
                                        <el-button type="primary" @click="onSubmit">保存</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </template>
                </el-main>
            </el-container>
        </el-container>
        <#include "/yq/admin/components/footer.html" />
    </div>
    <#include "/yq/admin/components/scripts.html" />
    <#include "/components/qiniu.html" />
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                types: [{ label: '普通活动', value: 1 }],
                imgDatas: [],
                fileList2: [],
                dialogImageUrl: '',
                dialogVisible: false,
                images: [],
                imageUrl: null,
                // form: toJson(`${data}`),
                form: ${data!'""'},
                products: toJson(`${products}`),
                formform: {
                    subtitle: `${info.subtitle!''}`,
                    desc: `${info.desc!''}`,
                    cover: `${info.cover!''}`,
                    images: `${info.images!''}`,
                    count: `${info.count!''}`,
                    price: `${info.price!''}`,
                    id: `${info.id!''}`,
                    type: `${info.type!''}`,
                    isHot: `${info.isHot!''}`,
                    isTop: `${info.isTop!''}`,
                    isHidden: `${info.isHidden!''}`,
                    isEnable: `${info.isEnable!''}`,
                },
                dynamicTags: [],
                inputVisible: false,
                inputValue: '',
                dateRange: ''
            }
        },
        mounted: function() {
            if (this.form.images != '') {
                // this.images = this.form.images.split(';');
                // for (var idx = 0; idx < this.images.length; idx++) {
                //     var url = this.images[idx];
                //     if (url == '') {
                //         continue;
                //     }
                //     this.fileList2.push({ 'name': '', 'url': url })
                // }
                this.form.coverUrl = this.form.cover
            }
            if (this.form.tags) {
                var tagList = this.form.tags.split(";");
                tagList.pop();
                this.dynamicTags = tagList;
            }
            if (this.form.startTime) {
                this.dateRange = new Array;
                this.dateRange.push(this.form.startTime);
                this.dateRange.push(this.form.endTime);
            }
        },
        methods: {
            sss() {
                axios({
                        method: 'get',
                        url: '/yq/api/file/token',
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    })
                    .then(function(res) {
                        console.log(res.data.info)
                        var token = res.data.info
                    })
            },
            onSubmit() {
                var imgs = '';
                // console.log(this.imgDatas)
                // for (var idx = 0; idx < this.imgDatas.length; idx++) {
                //     var item = this.imgDatas[idx];
                //     alert('sss')
                //     if (item.response != null) {
                //         var url = item.response.data.url;
                //         imgs = imgs + url + ';'
                //     } else {
                //         imgs = imgs + item.url + ';'
                //     }
                // }
                var startTime = '';
                var endTime = '';
                if (this.dateRange && this.dateRange.length > 1) {
                    startTime = this.dateRange[0];
                    endTime = this.dateRange[1];
                }
                var tags = '';
                if (this.dynamicTags.length > 0) {
                    for (var i = 0; i < this.dynamicTags.length; i++) {
                        tags += this.dynamicTags[i] + ";";
                    }
                }
                var param = {
                    itemId: this.form.id,
                    title: this.form.title,
                    subtitle: this.form.subtitle,
                    type: this.form.type,
                    address: this.form.address,
                    cover: this.form.cover,
                    productId: this.form.productId,
                    // images: imgs,
                    intro: this.form.intro,
                    isEnable: this.form.isEnable,
                    isHot: this.form.isHot,
                    isTop: this.form.isTop,
                    coverUrl: this.form.coverUrl,
                    // price: this.form.price,
                    url: this.form.url,
                    isHidden: this.form.isHidden,
                    tags: tags,
                    subscribeCount:this.form.subscribeCount,
                    shareTitle: this.form.shareTitle,
                    shareImage: this.form.shareImage,
                    startTime: startTime,
                    endTime: endTime
                }
                // console.log(param)
                var url = ''
                var ref = '${referer!""}'
                var url = '/yq/admin/item/submit'
                axiosRequest(param, url, ref)
            },
            fileChanged(file, fileList) {
                console.log(file)
                console.log(fileList)
                console.log(this.fileList2)
                this.imgDatas = fileList
                // console.log(fileList2)
                // console.log(this.imgDatas)
            },
            ck() {
                console.log(this.imgDatas)
            },
            // req(file) {
            //     onUploadSMImage(file)
            // },
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },
            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            },
            handleAvatarSuccess(res, file) {
                console.log(res)
                console.log(file)
                this.form.cover = res.data.url
                // this.form.cover = URL.createObjectURL(file.raw);
            },
            handleShareImgSuccess(res, file) {
                console.log(res)
                console.log(file)
                this.form.shareImage = res.data.url
                // this.form.cover = URL.createObjectURL(file.raw);
            },
            useCoverForShare() {
                this.form.shareImage = this.form.cover;
            },
            handleShareImgError(err, file, fileList) {
                console.log(err);
            },
        },
        filters: {
            fmt(date) {
                return date
            }
        }
    })
    </script>
    <script>
    </script>
</body>

</html>